<template>
  <div class="vip_charge">
    <el-table :data="vipCharge" border style="width: 100%">
      <el-table-column prop="imageUrl" label="头像" width="150" align="center">
        <template slot-scope="scope">
          <el-avatar
            shape="square"
            :size="50"
            :fit="cover"
            :src="scope.row.imageUrl"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="productName"
        label="商品名称"
        width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="product_id"
        label="订单编号"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="price" label="单价" align="center" width="60">
      </el-table-column>
      <el-table-column prop="inventory" label="库存" align="center" width="60">
      </el-table-column>
      <el-table-column
        prop="description"
        label="商品介绍"
        align="center"
        width="300"
      >
      </el-table-column>

      <el-table-column prop="address" label="操作" align="center">
        <template v-slot="{ row }">
          <el-button
            class="caoZuoButton"
            type="primary"
            icon="el-icon-view"
            @click="preOrder(row)"
            >去下单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
import * as api from "../../../../api";
import {mapMutations} from 'vuex'
export default {
  methods: {
    ...mapMutations(['SET_PRE_ORDER']),
    preOrder(row) {
      console.log(row); //获取当行的内容

      this.$confirm(`您正在购买 “${row.productName}”, 是否下单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          row.quantity = 0 //定义下单的数量
         //1.将这条商品存vuex中
            this.SET_PRE_ORDER(row)
        //  2.跳转页面到perOrder中
        this.$router.push({name:"preOrder"})
        // 3.展示商品详情
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  data() {
    return {
      vipCharge: [],
    };
  },
  mounted() {
    api.getVipCharge("20210827165510715").then((res) => {
      // console.log(123);
      console.log(res);
      this.vipCharge = res.data.data;
    });
  },
};
</script>

<style scoped lang='less'>
.vip_charge {
  padding-top: 20px;
}

/deep/ .el-avatar > img {
  width: 100% !important;
  height: 30px;
  padding-top: 25px;
}

/deep/ .el-avatar--square {
  width: 100px !important;
  height: 80px !important;
  line-height: 80px !important;
  background: #fff;
}
</style>